
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Footer from '../components/Footer';
import { WingBlank, Tabs } from 'antd-mobile'
import TrainTicket from '../components/ticket/TrainTicket'
import BusTicket from '../components/ticket/BusTicket'
import FlyTicket from '../components/ticket/FlyTicket'
import BoatTicket from '../components/ticket/BoatTicket'
import axios from 'axios';

function mapStateToProps(state) {
    return {
        ...state
    };
}

function mapDispatchToProps(dispatch) {
    return {
        getCityList(){
           axios.get('/api/city').then((res)=>{
            console.log('api/city',res.data.data.list);
            dispatch({type:"SET_CITY_LIST",data:res.data.data.list})
           })
        },
        getTicketList(data){
           axios.get('/api/ticket').then((res)=>{
            console.log('api/ticket',res.data.data.list);
            dispatch({type:"SET_TICKET_LIST",data:res.data.data.list})
           })
        }
    };
}

class Home extends Component {
  
   componentWillMount(){
       this.props.getCityList();
       this.props.getTicketList();
   }

    render() {

        const tabs = [
            { title: '火车票' },
            { title: '飞机票' },
            { title: '汽车票' },
            { title: '船票票' },
        ];


        return (
            <div>
                <WingBlank><div>

                    <Tabs tabs={tabs} initialPage={0} animated={false} useOnPan={false}>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center'  ,width:'100%', backgroundColor: '#fff' }}>
                           <TrainTicket city={this.props.city_list}></TrainTicket>
      </div>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
                           <FlyTicket></FlyTicket>
      </div>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
                           <BusTicket></BusTicket>
      </div>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
                            <BoatTicket></BoatTicket>
      </div>
                    </Tabs>
                </div></WingBlank>
                <Footer {...this.props}></Footer>
            </div>
        );
    }
}

export default connect(
    mapStateToProps,mapDispatchToProps
)(Home);

